<template>
  <n-form ref="formRef" :model="props.formValue" :rules="rules" :label-width=" labelWidth || 100"
          label-placement="left">
    <n-grid x-gap="12">
      <template v-for="(item,index) in props.formList" :key="index+ 'form1'">
        <n-gi :span="item.span || 24">
          <slot v-if="item.slot" :name="item.slot" :formitem="item"></slot>
          <!--          输入框-->
          <n-form-item v-else-if="item.type==='input'" :path="item.path || item.key"
                       :label="item.label + '：'" :rule="item.rules||[]">
            <n-input v-model:value="props.formValue[item.key]" @keydown.enter.prevent
                     :type="item.password || 'text'" @change='shauxin'
                     :placeholder="item.placeholder || '请输入'" clearable
                     :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled">
              <template v-if="item.prefix" #prefix>
                {{ item.prefix }}
              </template>
              <template v-if="item.suffix" #suffix>
                {{ item.suffix }}
              </template>
            </n-input>
          </n-form-item>
          <!--          文本域-->
          <n-form-item v-else-if="item.type==='textarea'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-input v-model:value="props.formValue[item.key]" type="textarea" @keydown.enter.prevent
                     :placeholder="item.placeholder || '请输入'" clearable @change='shauxin'
                     :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"/>
          </n-form-item>
          <!--          选择框-->
          <n-form-item v-else-if="item.type==='select'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-select v-model:value="props.formValue[item.key]" @keydown.enter.prevent
                      :placeholder="item.placeholder || '请选择'" :on-update:value='(val)=>shauxin(val,item.key)'
                      clearable :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"
                      :options="item.options || props.dictoptions[item.key] || []"></n-select>
          </n-form-item>
          <!--          日期选择-->
          <n-form-item v-else-if="item.type==='picker'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-date-picker v-model:value="props.formValue[item.key]" :type="item.datetype || 'date'" clearable
                           :on-update:value='(val)=>shauxin(val,item.key)'
                           :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"/>
          </n-form-item>
          <!--          单选-->
          <n-form-item v-else-if="item.type==='radio'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-radio-group v-model:value="props.formValue[item.key]" name="radiogroup" @change='shauxin'
                           :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled">
              <n-space>
                <n-radio v-for="el in item.options || props.dictoptions[item.key] || []" :value="el.value">
                  {{ el.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
          <!--          多选-->
          <n-form-item v-else-if="item.type==='checkbox'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-checkbox-group v-model:value="props.formValue[item.key]" @change='shauxin'
                              :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled">
              <n-space item-style="display: flex;">
                <n-checkbox v-for="el in item.options || props.dictoptions[item.key] || []" :value="el.value"
                            :label="el.label"/>
              </n-space>
            </n-checkbox-group>
          </n-form-item>
          <!--          开关-->
          <n-form-item v-else-if="item.type==='switch'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-switch v-model:value="props.formValue[item.key]" :round="false" @change='shauxin'
                      :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"/>
          </n-form-item>
<!--          树形选择器-->
          <n-form-item v-else-if="item.type==='cascader'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-cascader
              v-model:value="props.formValue[item.key]"
              :placeholder="item.placeholder || '请选择'"
              :options="item.options || props.dictoptions[item.key] || []"
              remote
              :show-path="false"
              clearable
              :value-field='item.valuefield || "id"'
              :label-field='item.labelfield || "name"'
              :disabled="item.disabled===null || item.disabled===undefined?false:item.disabled"
              :on-update:value='(val)=>shauxin(val,item.key)'
            />
          </n-form-item>
        </n-gi>
      </template>
    </n-grid>
  </n-form>
</template>

<script setup name="flexform" lang='ts'>
import {ref,DefineComponent,defineProps,defineExpose,defineEmits} from "vue"
const rules = ref({})
const formRef = ref<DefineComponent | null>(null)
interface myformitem {
  span:number,
  slot?:string,
}
const props:any = defineProps({
  formList: {
    type: Array,
    default(data){
      return data
    },
  },
  dictoptions: {
    type: Object,
    default(data){
      return data || {}
    },
  },
  formValue: {
    type: Object,
    default(data){
      return data || {}
    },
  },
  labelWidth:{
    type:Number,
    default:100,
  },
})
const emit =  defineEmits(["update:formValue"])

// 校验
const jiaoyan = (httpfunc: Function) => {
  const jieguo = formRef.value!.validate((errors:any) => {
    if (!errors) {
      httpfunc(props.formValue)
    }
  })
  return jieguo
}

const shauxin =(data:any,key:any=null)=>{
  console.log(data,"change回调")
  console.log(props.formValue,"现在的数据")
  if(key){
    console.log("要修改的key是：",key)
    props.formValue[key] = data
  }
  emit("update:formValue",{...props.formValue})
}
defineExpose({jiaoyan})
</script>

<style scoped>

</style>
